<template>
  <div class="carousel">
    <ul>
      <li
        v-for="(item, index) in carouselImage"
        :key="index"
        :class="{ active: index===currentIndex }"
      >
        <img :src="item" alt>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "carousel",
  data() {
    return {
      currentIndex: 0,
      carouselImage: [
        "../static/images/bg1.jpg",
        "../static/images/bg2.jpg",
        "../static/images/bg3.jpg"
      ]
    };
  },
  created() {
    this.play();
  },
  computed: {},
  methods: {
    play() {
      const timer = setInterval(() => {
        if (this.currentIndex === this.carouselImage.length - 1) {
          this.currentIndex = -1;
        }
        this.currentIndex++;
      }, 4000);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.carousel {
  position: relative;
}
.carousel ul li {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2.5s;
  -webkit-transition: opacity 2.5s; /* Safari */
}
.carousel ul li img {
  width: 100%;
  height: max-content;
}
ul li.active {
  opacity: 1;
}
</style>
